<template>
	<view class="container">
		<nav-bar :title="title"></nav-bar>
		<view class="member-list">
			<view class="member-item" v-for="(item,index) in dataList" :key="index">
				<view class="member-avatar">
					<image :src="item.avatar"></image>
				</view>
				<view class="member-name">{{item.name}}</view>
			</view>
			<view class="member-item" @tap="goDelGroupMember">
				<view class="member-avatar">
					<image src="../../static/images/del_member.png"></image>
				</view>
				<view class="member-name"></view>
			</view>
		</view>
		<view class="more-member" @tap="goAllMember">查看更多群成员</view>
		<view class="line"></view>
		<view class="list-box">
			<view class="list-item">
				<view class="item-label">群聊名称</view>
				<view class="item-input">郑州大学招办咨询</view>
			</view>
			<view class="line-thin"></view>
			<view class="list-item">
				<view class="item-label">全体禁言</view>
				<view class="item-input">
					<switch @change="speakChange" color="#45d6b7" style="transform: scale(0.85,0.85)"></switch>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '../../components/nav_bar.vue'
	import { http, showToastMsg } from '../../utils'
	
	export default {
		components: {
			NavBar
		},
		
		data() {
			return {
				title: '群成员',
				dataList: [],
				dataAllList: [
					{id: 1, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 2, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 3, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 4, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 5, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 6, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 7, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 8, name: '我cao...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 9, name: '不懂', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 10, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
					{id: 11, name: '黎昕', avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg'},
					{id: 12, name: '往事难...', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F24%2F20181024133921_wlvbo.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613212016&t=a7697b8a674aafb037fa4ebd35ddb2eb'},
				]
			}
		},
		
		onLoad() {
			this.title = '群成员(' + this.dataAllList.length + ')'
			this.dataList = this.dataAllList
		},
		
		methods: {
			
			goDelGroupMember() {
				uni.navigateTo({
					url: '/pages/del_group_member/del_group_member'
				})
			},
			
			goAllMember() {
				uni.navigateTo({
					url: '/pages/group_member_all/group_member_all'
				})
			},
			
			speakChange(e) {
				let v = e.target.value
				if (v) {
					showToastMsg('全体禁言')
				} else {
					showToastMsg('解除禁言')
				}
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
	}
	
	.member-list {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.member-item {
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 42rpx;
	}
	
	.member-avatar image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}
	
	.member-name {
		color: #999999;
		font-size: 24rpx;
	}
	
	.more-member {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999999;
		font-size: 30rpx;
	}
	
	.line {
		width: 750rpx;
		height: 18rpx;
		background-color: #f5f6f8;
		margin-top: 30rpx;
	}
	
	.list-box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.list-item {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.item-label {
		color: #575757;
		font-size: 30rpx;
	}
	
	.item-input {
		color: #999999;
		font-size: 30rpx;
	}
	
	.line-thin {
		width: 720rpx;
		margin-left: 30rpx;
		height: 2rpx;
		background-color: #f5f5f5;
	}
</style>
